<? include("/inc/header.html") {} ?>
<link rel="stylesheet" href="static/uploadify/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="static/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="static/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" src="static/utf8-jsp/ueditor.all.js"></script>
<script type="text/javascript" src="static/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="static/utf8-jsp/third-party/video-js/video.js"></script>
<script type="text/javascript" src="static/My97DatePicker/WdatePicker.js"></script>
<!-- <script src="static/laydate/laydate.js"></script> --> <!-- 改成你的路径 -->
<style>
.row{
	margin-bottom: 10px;
}
</style>
<div class="col-lg-12" style="overflow: auto;height: 500px;">
	<div class="panel panel">
		<div class="panel-body pan">
			<div class="form-body pal">
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">课程名称(只允许汉字、英文字母、数字及下划线,50字以内 )<span
						class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<input id="name" type="text" class="form-control" />
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">所属栏目
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<select class="form-control" id="categoryId">
									<option value="">全部</option>
									<!-- <option value="01">语文</option>
									<option value="02">数学</option>
									<option value="03">英语</option> -->
								</select>
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">所属学段
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<select class="form-control" id="grade">
									<option value="一年级">一年级</option>
									<option value="二年级">二年级</option>
									<option value="三年级">三年级</option>
								</select>
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">标签（多值，用英文分号分割,限制在150个字符内）
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<input id="tag" type="text" class="form-control" />
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">封面图片
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div >
							<div style="display:inline " id="cover"></div>
							<input type="button" class="btn btn-primary" style="width: 70px;height: 30px;padding: 0;background-color: #4cae4c;border-color: #4cae4c;" onclick="upImages()" value="上传图片"  />
							<textarea id="uploadImage" name="uploadImage" style="display: none;"></textarea>
							<input id="coverImg" type="hidden" class="form-control" value="" />
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">授课教师
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<span id="userIds">
							<!-- <span  class="btn btn-blue">教师001</span>
							<span  class="btn btn-blue">教师002</span> -->
						</span>
						<span class="btn btn-default btn-outlined" onclick="teacherSelect()"><i class="fa fa-plus"></i>&nbsp;添加新老师</span>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">课程简介(限制在5000字符以内 )
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<script id="description" name="description" type="text/plain" ></script>
							 <script type="text/javascript">
						        var text = UE.getEditor('description',{ initialFrameHeight:370 });
						    </script>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input id="id" type="hidden" class="form-control" value="${id}"/>
</div>
<script>
	$(function() {
		_editor = UE.getEditor('uploadImage');
	    _editor.ready(function (){
	        //设置编辑器不可用(事实上不可以设置不可用...所以注释掉,以观后效)
	        _editor.setDisabled();
	        //隐藏编辑器,因为只使用上传功能
	        _editor.hide();
	        //侦听图片上传
	  	 	_editor.addListener('beforeInsertImage',function(t,arg){
	  	 			for(var i=0;i<arg.length;i++){
	  	 				var urlPath = arg[i].src;
	  	 				$("#coverImg").val(urlPath);
						$("#cover").html("<a href="+urlPath+" download='w3logo'><img src='"+urlPath+"' width='30' height='30' /></a>");
	  	 			}
	        });
	        //侦听文件上传
		   	 _editor.addListener('afterUpfile',function(t,arg){
		   	 	
		   	 });
	   });
		initCategory();
	});
function userIdsHtml(data){
	var splits = data.split(";");
	var html='';
	for(var i in splits){
		if(splits[i]!=''){
			var ss = splits[i].split(":");
			html+='<span style="margin-left: 5px;" class="btn btn-blue" val="'+ss[0]+'">'+ss[1]+'</span>';
		}
	}
	$("#userIds").html(html);
}
function init(){
	if($("#id").val() != null 
		&& $("#id").val() != ''
		&& $("#id").val() != 'null'
		&& $("#id").val() != 'undefined'
		&&$("#id").val() != undefined){
		$.ajax({
			type : "post",
			url : "./courseFind.do",
			data : {
				"id" : $("#id").val()
			},
			dataType : "json",
			success : function(data) {
				$("#categoryId").val(data[0].categoryId);
				$("#grade").val(data[0].grade);
				$("#name").val(data[0].name);
				$("#tag").val(data[0].tag);
				
				var teacherHtml='';
				for(var i in data[0].userIds){
					teacherHtml += '<span style="margin-left: 5px;" class="btn btn-blue" val="'+i+'">'+data[0].userIds[i]+'</span>';
				}
				$("#userIds").html(teacherHtml);
				
				text.ready(function() {
				    text.setContent(data[0].description);  //赋值给UEditor
				});
				
				/* text.addListener("ready", function () {
			　　　　// editor准备好之后才可以使用
			　　　　text.setContent(data[0].description);
			　　}); */
				
				$("#coverImg").val(data[0].cover);
				$("#cover").html("<a href="+data[0].cover+" download='w3logo'><img src='"+data[0].cover+"' width='30' height='30' /></a>");
				
			},
			error : function(data) {
				alert("请求失败");
			}
		});
	}
}
function initCategory(){
		$.ajax({
				type : "post",
				url : "./categoryAllList.do",
				dataType : "json",
				success : function(data) {
					var html = '';
					for(var i in data){
						html+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
					}
					$("#categoryId").html(html);
					init();
				},
				error : function(data) {
					alert("请求失败");
				}
			});
	}
function save(){
	var id;
	if($("#id").val() != null 
		&& $("#id").val() != ''
		&& $("#id").val() != 'null'
		&& $("#id").val() != 'undefined'
		&&$("#id").val() != undefined){
		id=$("#id").val();
	}
	var userIds='';
	$("#userIds").find("span").each(function(){
		if($(this).attr("val")!=undefined && $(this).attr("val")!='undefined'&&$(this).attr("val")!=''){
			userIds+=$(this).attr("val")+";"
		}
	});
	
	if($("#name").val()==''){
		layer.msg("请输入课程名称");
		return false;
	}
	
	var name=$("#name").val(); //    
    var re =/^[\u4e00-\u9fa5_a-zA-Z0-9]{1,50}$/;
	if (!re.test(name)) {
		layer.msg('配置中文名称:只允许汉字、英文字母、数字及下划线。50字以内');
		return null;
	}
	
	
	if($("#categoryId").val()==''){
		layer.msg("请选择所属栏目");
		return false;
	}
	if($("#grade").val()==''){
		layer.msg("请选择所属学段");
		return false;
	}
	if($("#tag").val()==''){
		layer.msg("请输入标签，多值用英文分号分割");
		return false;
	}
	if($("#tag").val().length>150){
		layer.msg("标签:150字以内");
		return false;
	}
	if($("#coverImg").val()==''){
		layer.msg("请上传封面图片");
		return false;
	}
	if(userIds==''){
		layer.msg("请选择授课教师");
		return false;
	}
	if(text.getContent()==''){
		layer.msg("请输入课程简介");
		return false;
	}
	
	var content = text.getContent()
	 content = content.replace(/<[^>]*>|<\/[^>]*>/g, "");
	 if(content.length>5000){
	 	layer.msg('课程简介：5000字以内');
	 	return null;
	 }
	
	$.ajax({
		type : "post",
		url : "./courseAddUpdate.do",
		data : {
			"id" : id,
			"name" : $("#name").val(),
			"categoryId" : $("#categoryId").val(),
			"grade" : $("#grade").val(),
			"cover" : $("#coverImg").val(),
			"description" : text.getContent(),
			"tag" : $("#tag").val(),
			"userIds" : userIds,
		},
		dataType : "json",
		success : function(data) {
			if(data[0].result == 'success'){
				var index = parent.layer.getFrameIndex(window.name);
				window.parent.get();
				parent.layer.msg('提交成功');
				parent.layer.close(index);
			}else{
				parent.layer.alert(data[0].msg);
			}
		},
		error : function(data) {
			alert("请求失败");
		}
	});
}
function teacherSelect() {
	var id;
	if($("#id").val() != null 
		&& $("#id").val() != ''
		&& $("#id").val() != 'null'
		&& $("#id").val() != 'undefined'
		&&$("#id").val() != undefined){
		id=$("#id").val();
	}
	parent.layer.open({
		type : 2,
		area : [ '70%', '80%' ],
		fix : false, //不固定
		scrollbar : true,
		shadeClose : true,
		//move : false,
		title:"选择教师",
		skin : 'layui-layer-rim', //加上边框
		btn : [ '保存','关闭' ],
		content : ["queryuser.html?id="+id+"&type=course&winName="+window.name, 'no'],
		yes : function(index,layer) {		
		 var iframeWin = parent.window[layer.find('iframe')[0]['name']];
		  			  iframeWin.save();
		},
		cancel : function(index) {
		}
	});
}
//上传图片
function upImages() {
	var myFiles = _editor.getDialog("insertimage");
  		myFiles.open();
}
 //上传文件
function upFiles() {
	var myFiles = _editor.getDialog("attachment");
   	myFiles.open();
}
</script>